
.Mindmap {
  width: 1200px;
  height: 800px;
  margin: 30px auto;
  box-shadow: 0 0 10px black inset;
  position: relative;

  > .MindmapNode {
    // top: 400px;
  }
}

.MindmapLinks {
  overflow: visible;

  path {
    stroke: black;
    stroke-width: 10px;
  }
}

.MindmapMovable {
  overflow: hidden;
  height: 800px;
  width: 1200px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  cursor: -webkit-grab;

  &_container {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .2s ease, top .2s ease, left .2s ease;
  }
}

.MindmapNode {
  position: absolute;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 1;
  top: 0;
  left: 0;

  &-parent > &_main &_collapser {
    opacity: 0;
    transition: opacity .2s ease;

    &::after {
      content: ' ';
      position: absolute;
      left: 100%;
      top: 50%;
      margin-left: 2px;
      color: #ccc;
      margin-top: -20px;
      cursor: pointer;
      border-width: 20px 0px 20px 15px;
      border-color: transparent transparent transparent #ddd;
      border-style: solid;
    }
  }

  &-parent > &_main:hover &_collapser,
  &-collapsed > &_main &_collapser {
    opacity: 1;
  }

  &-hiding {
    pointer-events: none;
  }

  .Mindmap-active &-active > &_main {
    border-color: magenta;
  }

  .Mindmap-active &-editing > &_main {
    border-color: green;
  }

  &_line {
    border: none;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    background: #ccc;
    transform-origin: 0 50%;
    transition: transform .2s ease, width .2s ease;
  }

  &_main {
    padding: 20px;
    width: 250px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    background: white;
    cursor: pointer;
    z-index: 10;
    position: relative;
  }

  &_children {
    // position: relative;
  }
}


